<template>
  <div>
    <van-nav-bar title="订单详情" left-text="返回" left-arrow @click-left="back" />
    <van-steps :active="active">
      <van-step>未付款</van-step>
      <van-step>已付款</van-step>
      <van-step>已发货</van-step>
      <van-step>交易完成</van-step>
    </van-steps>
    <div class="checkList">
      <div class="head">
        <van-cell :title="chosenAddr.title" :label="chosenAddr.label" />
      </div>
      <van-cell v-for="(item,index) in buyProducts" :key="item.id" :title="item.name" :label="'￥'+item.price"
        :value="item.count + '件'">
        <template slot="icon">
          <span class="custom-title">
            <img class="orderpic" :src="'http://www.mianshiti.top' + item.cover">
          </span>
        </template>
      </van-cell>
    </div>
    <van-submit-bar :price="totalPrice" :disabled="totalPrice == 0" button-text="等待商家发货"  />
    </van-submit-bar>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        active:1,
        orderId: 0,
        buyProducts: sessionStorage.buyProducts ? JSON.parse(sessionStorage.buyProducts) : []
      }
    },
    computed: {
      chosenAddr() {
        if (this.$store.chosenAddr.name) {
          return {
            title: this.$store.chosenAddr.name + ', ' + this.$store.chosenAddr.mobile,
            label: this.$store.chosenAddr.address
          }
        } else {
          return {
            title: '请选择收货地址',
            label: ''
          }
        }
      },
      totalPrice() {
        let t = 0
        for (let i = 0; i < this.buyProducts.length; i++) {
          t += this.buyProducts[i].price * this.buyProducts[i].count
        }
        return t * 100
      }
    },
    methods: {
      back() {
        this.$router.back()
      },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .checkList {
    background-color: #f8f8f8;
    height: calc(100vh - 96px);
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }

  .orderpic {
    width: 15vw;
  }

  .van-cell {
    padding: 4px 10px;
  }

  .head {
    margin: 4vw 0;
  }

  .van-button--danger {
    color: #fff;
    background-color: #d4d1d1;
    border: 1px solid #d4d1d1;
  }
</style>